<template>
  <div id="cont">
    <div>
      <Row>
        <!--  第一个元素的图片      -->
        <Col span="11">
          <img :src="engineDetail.image" alt="" />
        </Col>
        <Col span="11" offset="2">
          <Row class-name="tb-row1">
            <Col span="8">编号</Col>
            <Col span="16">{{ engineDetail.sn }}</Col>
          </Row>
          <Row class-name="tb-row1">
            <Col span="8">型号</Col>
            <Col span="16">{{ engineDetail.model }}</Col>
          </Row>
          <Row class-name="tb-row1">
            <Col span="8">发动机类型</Col>
            <Col span="16">{{ engineDetail.engineType }}</Col>
          </Row>
          <Row class-name="tb-row1">
            <Col span="8">供应商</Col>
            <Col span="16">{{ engineDetail.supplier }}</Col>
          </Row>
        </Col>
      </Row>
    </div>

    <Divider orientation="left">参数配置</Divider>
    <div style="margin: 50px;">
      <Row class-name="tb-row1">
        <Col span="5">最高转速(rpm)</Col>
        <Col span="7">{{ engineDetail.maxSpeed }}</Col>
        <Col span="5">怠速转速(rpm)</Col>
        <Col span="7">{{ engineDetail.idleSpeed }}</Col>
      </Row>
      <Row class-name="tb-row1">
        <Col span="5">最大扭矩(Nm)</Col>
        <Col span="7">{{ engineDetail.maxTorque }}</Col>
        <Col span="5">最大扭矩转速(rpm)</Col>
        <Col span="7">{{ engineDetail.speedAtMaxTorque }}</Col>
      </Row>
      <Row class-name="tb-row1">
        <Col span="5">最大功率(kW)</Col>
        <Col span="7">{{ engineDetail.maxPower }}</Col>
        <Col span="5">最大功率转速(rpm)</Col>
        <Col span="7">{{ engineDetail.speedAtMaxPower }}</Col>
      </Row>
      <Row class-name="tb-row1">
        <Col span="5">重量(kg)</Col>
        <Col span="7">{{ engineDetail.weight }}</Col>
        <Col span="5">发动机排量(L)</Col>
        <Col span="7">{{ engineDetail.displacement }}</Col>
      </Row>
      <Row class-name="tb-row1">
        <Col span="5">增压器类型</Col>
        <Col span="7">{{ engineDetail.boosterType }}</Col>
        <Col span="5">气缸数</Col>
        <Col span="7">{{ engineDetail.cylinderNumber }}</Col>
      </Row>
      <Row class-name="tb-row1">
        <Col span="5">冲程数</Col>
        <Col span="7">{{ engineDetail.strokeNumber }}</Col>
        <Col span="5">怠速油耗(g/kWh)</Col>
        <Col span="7">{{ engineDetail.idleBsfc }}</Col>
      </Row>
      <Row class-name="tb-row1">
        <Col span="5">转动惯量（曲轴+飞轮）(kg*m^2)</Col>
        <Col span="7">{{ engineDetail.idleSpeedWeight }}</Col>
        <Col span="5">燃油类型</Col>
        <Col span="7">{{ engineDetail.fuelType }}</Col>
      </Row>
      <Row class-name="tb-row1">
        <Col span="5">燃料热值(kJ/kg)</Col>
        <Col span="7">{{ engineDetail.heatValue }}</Col>
        <Col span="5">燃油密度(kg/m^3)</Col>
        <Col span="7">{{ engineDetail.density }}</Col>
      </Row>
    </div>

    <Divider orientation="left">外特性曲线</Divider>
    <div style="margin: 30px;">
      <Row>
        <Col span="11" offset="1">
          <Button style="margin-left: 5px;" type="primary">导入</Button>
          <Button
            style="margin-left: 5px;"
            type="success"
            @click="addExternalCharacteristicModelShow"
            >新增</Button
          >
          <Button style="margin-left: 5px;" type="error" @click="delExternalRow"
            >删除</Button
          >
          <Button
            style="margin-left: 5px;"
            type="info"
            @click="engineExternalCharacteristicSave"
            >保存</Button
          >
          <Button style="margin-left: 5px;">导出</Button>
          <vxe-table
            ref="xTable"
            height="300"
            border
            highlight-hover-row
            show-overflow
            :data="externalCharacteristicTableData"
            :edit-config="{ trigger: 'click', mode: 'cell' }"
          >
            <vxe-column type="checkbox" width="60"></vxe-column>
            <vxe-column type="seq" width="60"></vxe-column>
            <vxe-column
              field="speed"
              title="转速(rpm)"
              :edit-render="{ name: 'input' }"
            ></vxe-column>
            <vxe-column
              field="torque"
              title="扭矩(Nm)"
              :edit-render="{ name: 'input' }"
            ></vxe-column>
          </vxe-table>
        </Col>
        <Col span="11" offset="1">
          <div style="height:400px;" id="a"></div>
        </Col>
      </Row>
    </div>

    <Divider orientation="left">倒拖特性曲线</Divider>
    <div style="margin: 30px;">
      <Row>
        <Col span="11" offset="1">
          <Button style="margin-left: 5px;" type="primary">导入</Button>
          <Button
            style="margin-left: 5px;"
            type="success"
            @click="addReverseExternalCharacteristicModelShow"
            >新增</Button
          >
          <Button
            style="margin-left: 5px;"
            type="error"
            @click="delReverseExternalRow"
            >删除</Button
          >
          <Button
            style="margin-left: 5px;"
            type="info"
            @click="reverseExternalCharacteristicSave"
            >保存</Button
          >
          <Button style="margin-left: 5px;">导出</Button>

          <vxe-table
            ref="xTable1"
            height="300"
            border
            highlight-hover-row
            show-overflow
            :data="externalReverseCharacteristicTableData"
            :edit-config="{ trigger: 'click', mode: 'cell' }"
          >
            <vxe-column type="checkbox" width="60"></vxe-column>
            <vxe-column type="seq" width="60"></vxe-column>
            <vxe-column
              field="speed"
              title="转速(rpm)"
              :edit-render="{ name: 'input' }"
            ></vxe-column>
            <vxe-column
              field="torque"
              title="扭矩(Nm)"
              :edit-render="{ name: 'input' }"
            ></vxe-column>
          </vxe-table>
        </Col>
        <Col span="11" offset="1">
          <div style="height:400px;" id="b"></div>
        </Col>
      </Row>
    </div>

    <Divider orientation="left">万有特性曲线</Divider>
    <div style="margin: 30px;">
      <Row>
        <Col span="7" offset="1">
          <Button style="margin-left: 5px;" type="primary">导入</Button>
          <Button
            style="margin-left: 5px;"
            type="success"
            @click="addEngineThousandModelShow"
            >新增</Button
          >
          <Button
            style="margin-left: 5px;"
            type="error"
            @click="delEngineThousandRow"
            >删除</Button
          >
          <Button
            style="margin-left: 5px;"
            type="info"
            @click="saveEngineThousand"
            >保存</Button
          >
          <Button style="margin-left: 5px;">导出</Button>
          <!--{{tableData}}-->
          <vxe-table
            ref="xTable2"
            height="400"
            border
            highlight-hover-row
            show-overflow
            :data="engineThousandTableData"
            :edit-config="{ trigger: 'click', mode: 'cell' }"
          >
            <vxe-column type="checkbox" width="60"></vxe-column>
            <vxe-column type="seq" width="60"></vxe-column>
            <vxe-column
              field="speed"
              title="转速"
              :edit-render="{ name: 'input' }"
            ></vxe-column>
            <vxe-column
              field="torque"
              title="扭矩"
              :edit-render="{ name: 'input' }"
            ></vxe-column>
            <vxe-column
              field="bsfc"
              title="功率"
              :edit-render="{ name: 'input' }"
            ></vxe-column>
            <vxe-column
              field="throat"
              title="油门"
              :edit-render="{ name: 'input' }"
            ></vxe-column>
          </vxe-table>
        </Col>
        <Col span="15" offset="1">
          <div style="height:400px;" id="c"></div>
        </Col>
      </Row>
    </div>
  </div>
</template>

<script>
import { engineApi } from "@/api/engine";
import { engineExternalCharacteristicApi } from "@/api/engine-external-characteristic";
import { engineReverseApi } from "@/api/engine-reverse";
import { engineThousandApi } from "@/api/engine-thousand";
const PAGE_SIZE_INIT = 20;
export default {
  name: "EnginDetail",
  components: {},
  props: {
    /*id:{type:String}*/
  },
  data() {
    return {
      //////////////////////////////////////////发动机外特性曲线 start @version2.0//////////////////////////////////////////

      //////////////////////////////////////////发动机外特性曲线 end @version2.0//////////////////////////////////////////

      ///////////////////////万有特性start
      id: null,
      engineThousandModelShow: false, // 万有曲线 显示标识
      engineThousandModel: {
        speed: null,
        torque: null,
        throat: null,
        bsfc: null,
        massFlowRate: null
      },
      engineThousandTableData: [],
      ///////////////////////万有特性end

      engineDetail: null, // 发动机详情
      // 外特性曲线
      externalCharacteristicModelShow: false,
      externalCharacteristicModel: {
        speed: null,
        torque: null,
        throat: null,
        power: null
      },
      externalCharacteristicTableData: [],

      // 倒拖特性曲线
      externalReverseCharacteristicModelShow: false,
      externalReverseCharacteristicModel: {
        speed: null,
        torque: null,
        throat: null,
        power: null
      },
      externalReverseCharacteristicTableData: [],
      externalReverseCharacteristicTableSelection: []
    };
  },
  watch: {
    externalCharacteristicTableData: {
      //深度监听，可监听到对象、数组的变化
      handler(newVal, oldVal) {
        this.renderExternalCharacteristicEchart();
      },
      deep: true //true 深度监听
    },
    externalReverseCharacteristicTableData: {
      handler(newVal, oldVal) {
        this.renderReverseExternalCharacteristicEchart();
      },
      deep: true //true 深度监听
    },
    engineThousandTableData: {
      handler(newVal, oldVal) {
        this.renderEngineThousandTableDataEchart();
      },
      deep: true //true 深度监听
    }
  },
  mounted() {
    this.id = this.$route.query.id;
    this.fetchEnginDetail();
    // this.init();

    // 初始化外特性曲线初始化
    this.getEngineExternalCharacteristicTable();

    // 倒拖特性曲线初始化
    this.getRevseEngineExternalCharacteristicTable();
  },
  methods: {
    /*

      engineThousandModel: {
        speed: null,
        torque: null,
        throat: null,
        bsfc: null,
        massFlowRate: null
      },
      engineThousandTableData: [],

*/

    saveEngineThousand() {
      // 数据验证
      if (
        !(
          this.engineThousandTableData &&
          this.engineThousandTableData.length > 0
        )
      ) {
        this.$Message.warning("没有可保存的数据！");
        return;
      }

      const speed = this.engineThousandTableData.map(item => item.speed);
      const torque = this.engineThousandTableData.map(item => item.torque);
      const throat = this.engineThousandTableData.map(item => item.throat);
      const bsfc = this.engineThousandTableData.map(item => item.bsfc);
      const massFlowRate = this.engineThousandTableData.map(
        item => item.massFlowRate
      );

      const param = {
        speed: JSON.stringify(speed),
        torque: JSON.stringify(torque),
        throat: JSON.stringify(throat),
        bsfc: JSON.stringify(bsfc),
        massFlowRate: JSON.stringify(massFlowRate),
        tableData: JSON.stringify(this.engineThousandTableData)
      };
      engineThousandApi.addEngineThousand(param).then(res => {
        this.$Message.warning("保存成功");
      });
    },

    // todo 渲染万有曲线
    renderEngineThousandTableDataEchart() {
      const speed = this.engineThousandTableData.map(item => item.speed);
      const torque = this.engineThousandTableData.map(item => item.torque);
      const throat = this.engineThousandTableData.map(item => item.throat);
      const bsfc = this.engineThousandTableData.map(item => item.bsfc);
      const massFlowRate = this.engineThousandTableData.map(
        item => item.massFlowRate
      );

      const option = {
        title: {
          text: "万有引力"
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          x: "right",
          data: ["扭矩(Nm)", "功率", "油门(%)"],
          textStyle: {
            fontsize: 5
          }
        },
        grid: {
          left: "13%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: "category",
          data: speed
        },
        yAxis: [
          {
            boundaryGap: [0, "50%"],
            axisLine: {
              lineStyle: {
                color: "#102b6a"
              },
              show: true
            },
            type: "value",
            name: "扭矩(Nm)",
            position: "left",
            offset: 130,
            // splitNumber:10,
            axisLabel: {
              formatter: "{value}",
              textStyle: {
                color: "#102b6a"
              }
            },
            splitLine: {
              show: false
            }
          },
          {
            boundaryGap: [0, "50%"],
            axisLine: {
              lineStyle: {
                color: "#d93a49"
              },
              show: true
            },
            splitLine: {
              show: false
            },
            offset: 70,
            type: "value",
            name: "功率",
            position: "left",
            axisLabel: {
              formatter: "{value} ",
              textStyle: {
                color: "#d93a49"
              }
            }
          },
          {
            boundaryGap: [0, "50%"],
            axisLine: {
              lineStyle: {
                color: "#7fb80e"
              },
              show: true
            },
            axisLabel: {
              formatter: "{value} ",
              textStyle: {
                color: "#7fb80e"
              }
            },
            splitLine: {
              show: false
            },
            type: "value",
            name: "油门(%)",
            offset: 10,
            position: "left",
            axisTick: {
              inside: "false",
              length: 10
            }
          }
        ],
        series: [
          {
            name: "扭矩(Nm)",
            type: "line",
            data: torque,
            yAxisIndex: 0,
            smooth: true
          },
          {
            name: "功率",
            type: "line",
            data: bsfc,
            yAxisIndex: 1,
            smooth: true
          },
          {
            name: "油门(%)",
            type: "line",
            data: throat,
            yAxisIndex: 2,
            smooth: true
          }
        ]
      };

      var myChart = this.echarts.init(document.getElementById("c"));
      myChart.setOption(option);
    },

    // 新增一条万有特性曲线
    engineThousandModelOk() {
      // 显示table数据
      this.externalCharacteristicModel[
        "index"
      ] = this.engineThousandTableData.length;
      this.engineThousandTableData.push(this.engineThousandModel);

      // 组合echart组件的数据动态并动态展示

      // 清空表单缓存数据
      this.engineThousandModel = {
        speed: null,
        torque: null,
        throat: null,
        power: null
      };
    },

    async delEngineThousandRow() {
      // console.log(this.$refs.xTable.getCheckedFilters())
      const { rows } = await this.$refs.xTable2.removeCheckboxRow();
      console.log(rows);
      if (rows && rows.length > 0) {
        const newArr = [];
        const tempar = rows.map(item => item.index);
        this.engineThousandTableData.forEach(item => {
          if (tempar.indexOf(item.index) == -1) {
            newArr.push(item);
          }
        });
        this.engineThousandTableData = newArr;
      } else {
        this.$Message.warning("没有可删除的数据！");
      }
    },

    // 新增万有引力事件
    addEngineThousandModelShow() {
      const $table = this.$refs.xTable2;
      const record = {
        speed: null,
        torque: null,
        throat: null,
        bsfc: null,
        massFlowRate: null,
        index: this.engineThousandTableData.length
      };
      this.engineThousandTableData.push(record);
      const { row: newRow } = $table.insertAt(record, -1);
      $table.setActiveCell(newRow, "speed");
    },

    getEngineExternalCharacteristicTable() {
      engineExternalCharacteristicApi.getByEngineId(this.id).then(res => {
        console.log("----->", res);
        const data = res.data;
        if (data) {
          // 组合table数据

          const tableData = JSON.parse(data.tableData);
          if (tableData && tableData.length > 0) {
            this.externalCharacteristicTableData = tableData;
          }

          this.renderExternalCharacteristicEchart();
        }
      });
    },

    // 倒拖特性曲线
    getRevseEngineExternalCharacteristicTable() {
      engineReverseApi.getByEngineId(this.id).then(res => {
        const data = res.data;
        if (data) {
          // 组合table数据
          this.externalReverseCharacteristicTableData = JSON.parse(
            data.tableData
          );
          this.renderReverseExternalCharacteristicEchart();
        }
      });
    },

    // 保存倒拖特性曲线
    reverseExternalCharacteristicSave() {
      // 数据验证
      if (
        !(
          this.externalReverseCharacteristicTableData &&
          this.externalReverseCharacteristicTableData.length > 0
        )
      ) {
        this.$Message.warning("没有可保存的数据！");
        return;
      }

      const speed = this.externalReverseCharacteristicTableData.map(
        item => item.speed
      );
      const torque = this.externalReverseCharacteristicTableData.map(
        item => item.torque
      );
      const throat = this.externalReverseCharacteristicTableData.map(
        item => item.throat
      );
      const power = this.externalReverseCharacteristicTableData.map(
        item => item.power
      );

      const param = {
        engineId: this.id,
        speed: JSON.stringify(speed),
        torque: JSON.stringify(torque),
        power: JSON.stringify(power),
        throat: JSON.stringify(throat),
        tableData: JSON.stringify(this.externalReverseCharacteristicTableData)
      };
      engineReverseApi.addEngineReverse(param).then(res => {
        this.$Message.warning("保存成功");
      });
    },

    // 保存外特性曲线
    engineExternalCharacteristicSave() {
      // 数据验证
      if (
        !(
          this.externalCharacteristicTableData &&
          this.externalCharacteristicTableData.length > 0
        )
      ) {
        this.$Message.warning("没有可保存的数据！");
        return;
      }

      const speed = this.externalCharacteristicTableData.map(
        item => item.speed
      );
      const torque = this.externalCharacteristicTableData.map(
        item => item.torque
      );
      const throat = this.externalCharacteristicTableData.map(
        item => item.throat
      );
      const power = this.externalCharacteristicTableData.map(
        item => item.power
      );

      const param = {
        engineId: this.id,
        speed: JSON.stringify(speed),
        torque: JSON.stringify(torque),
        power: JSON.stringify(power),
        throat: JSON.stringify(throat),
        tableData: JSON.stringify(this.externalCharacteristicTableData)
      };
      engineExternalCharacteristicApi
        .addEngineExternalCharacteristic(param)
        .then(res => {
          this.$Message.warning("保存成功");
        });
    },

    // 获取发动机详情数据
    fetchEnginDetail() {
      engineApi.getById(this.id).then(res => {
        this.engineDetail = res.data;
      });
    },

    async delExternalRow() {
      // console.log(this.$refs.xTable.getCheckedFilters())
      const { rows } = await this.$refs.xTable.removeCheckboxRow();
      console.log(rows);
      if (rows && rows.length > 0) {
        const newArr = [];
        const tempar = rows.map(item => item.index);
        this.externalCharacteristicTableData.forEach(item => {
          if (tempar.indexOf(item.index) == -1) {
            newArr.push(item);
          }
        });
        this.externalCharacteristicTableData = newArr;
      } else {
        this.$Message.warning("没有可删除的数据！");
      }
    },
    //新增外特性曲线-- 确定事件
    externalCharacteristicModelOk() {
      // 显示table数据
      this.externalCharacteristicModel[
        "index"
      ] = this.externalCharacteristicTableData.length;
      this.externalCharacteristicTableData.push(
        this.externalCharacteristicModel
      );

      // 组合echart组件的数据动态并动态展示

      // 清空表单缓存数据
      this.externalCharacteristicModel = {
        speed: null,
        torque: null,
        throat: null,
        power: null
      };
    },

    //新增外特性曲线-- 保存事件
    externalCharacteristicModelSave() {},

    //新增外特性曲线
    addExternalCharacteristicModelShow() {
      // this.externalCharacteristicModelShow = true;
      const $table = this.$refs.xTable;
      const record = {
        speed: null,
        torque: null,
        index: this.externalCharacteristicTableData.length
      };
      this.externalCharacteristicTableData.push(record);
      const { row: newRow } = $table.insertAt(record, -1);
      $table.setActiveCell(newRow, "sex");
    },

    // 渲染echart-- 外特性曲线
    renderExternalCharacteristicEchart() {
      const speed = this.externalCharacteristicTableData.map(
        item => item.speed
      );
      const torque = this.externalCharacteristicTableData.map(
        item => item.torque
      );
      const throat = this.externalCharacteristicTableData.map(
        item => item.throat
      );
      const power = this.externalCharacteristicTableData.map(
        item => item.power
      );
      const option = {
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["扭矩Nm"],
          bottom: "20"
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "20%",
          containLabel: true
        },

        xAxis: {
          name: "发动机转速",
          nameLocation: "center",
          nameGap: 25,
          type: "category",
          boundaryGap: false,
          data: speed
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: "扭矩Nm",
            type: "line",
            stack: "Total",
            data: torque,
            smooth: true
          }
        ]
      };

      var myChart = this.echarts.init(document.getElementById("a"));
      myChart.setOption(option);
    },

    reverseExternalCharacteristicTableChange(selection) {
      this.externalReverseCharacteristicTableSelection = selection;
    },

    async delReverseExternalRow() {
      const { rows } = await this.$refs.xTable1.removeCheckboxRow();
      if (rows && rows.length > 0) {
        const newArr = [];
        const tempar = rows.map(item => item.index);
        this.externalReverseCharacteristicTableData.forEach(item => {
          if (tempar.indexOf(item.index) == -1) {
            newArr.push(item);
          }
        });
        this.externalReverseCharacteristicTableData = newArr;
      } else {
        this.$Message.warning("没有可删除的数据！");
      }
    },
    //新增外特性曲线-- 确定事件
    reverseExternalCharacteristicModelOk() {
      // 显示table数据
      this.externalReverseCharacteristicModel[
        "index"
      ] = this.externalReverseCharacteristicTableData.length;
      this.externalReverseCharacteristicTableData.push(
        this.externalReverseCharacteristicModel
      );

      // 组合echart组件的数据动态并动态展示

      // 清空表单缓存数据
      this.externalReverseCharacteristicModel = {
        speed: null,
        torque: null,
        throat: null,
        power: null
      };
    },

    //新增外特性曲线-- 保存事件
    reverseExternalCharacteristicModelSave() {},

    //新增外特性曲线
    addReverseExternalCharacteristicModelShow() {
      const $table = this.$refs.xTable1;
      const record = {
        speed: null,
        torque: null,
        index: this.externalReverseCharacteristicTableData.length
      };
      this.externalReverseCharacteristicTableData.push(record);
      const { row: newRow } = $table.insertAt(record, -1);
      $table.setActiveCell(newRow, "sex");
    },

    // 渲染echart-- 外特性曲线
    renderReverseExternalCharacteristicEchart() {
      const speed = this.externalReverseCharacteristicTableData.map(
        item => item.speed
      );
      const torque = this.externalReverseCharacteristicTableData.map(
        item => item.torque
      );
      const throat = this.externalReverseCharacteristicTableData.map(
        item => item.throat
      );
      const power = this.externalReverseCharacteristicTableData.map(
        item => item.power
      );
      const option = {
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["扭矩Nm"],
          bottom: "20"
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "20%",
          containLabel: true
        },

        xAxis: {
          name: "发动机转速",
          nameLocation: "center",
          nameGap: 25,
          type: "category",
          boundaryGap: false,
          data: speed
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: "扭矩Nm",
            type: "line",
            stack: "Total",
            smooth: true,
            data: torque
          }
        ]
      };

      var myChart = this.echarts.init(document.getElementById("b"));
      myChart.setOption(option);
    },

    init() {
      return;
      const option = {
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["扭矩Nm", "功率kW", "油门%"],
          bottom: "20"
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "20%",
          containLabel: true
        },

        xAxis: {
          name: "发动机转速",
          nameLocation: "center",
          nameGap: 25,
          type: "category",
          boundaryGap: false,
          data: ["1000", "1200", "1400", "1600", "1800", "2000", "2200"]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: "扭矩Nm",
            type: "line",
            stack: "Total",
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: "功率kW",
            type: "line",
            stack: "Total",
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: "油门%",
            type: "line",
            stack: "Total",
            data: [150, 232, 201, 154, 190, 330, 410]
          }
        ]
      };
      var myChart = this.echarts.init(document.getElementById("a"));
      myChart.setOption(option);

      var myChart1 = this.echarts.init(document.getElementById("b"));
      myChart1.setOption(option);
    }
  }
};
</script>
<style>
#cont {
  background-color: #fff;
  padding-top: 10px;
}

.tb-row1 {
  border: 1px solid #eee;
}

.tb-row1 > div {
  border-right: 1px solid #eee;
  height: 44px;
  line-height: 44px;
  font-size: 16px;
  padding-left: 10px;
}

.tb-row1 > div:first-child {
  color: #666;
  background: #f5f5f5;
  text-align: center;
  font-weight: bold;
}

.tb-row1 > div:nth-child(3) {
  color: #666;
  background: #f5f5f5;
  text-align: left;
  font-weight: bold;
  text-align: center;
}

.tb-row1 > div:last-child {
  border-right: 0;
}

.form-ex {
  margin-bottom: 20px;
}

.form-ex > div {
  width: 100px;
  display: inline;
}
</style>
